<template>
  <div class="dashboard-container">
    <div><el-button @click="IsShow = true">世界分布</el-button><el-button @click="createEchartsT()">全国分布</el-button></div>
    <div v-show="IsShow" id="echarts" class="echarts"></div>
    <div v-show="!IsShow" id="echartsT" class="echartsT"></div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  data(){
    return{
      IsShow:true
    }
  },
  mounted(){
    this.createMyecharts()
  },
  methods:{
    createEchartsT(){
      this.IsShow = false
      var geoGpsMap = [109.415953,24.325502];
      var geoCoordMap = {
        江苏: [118.8062, 31.9208],
        黑龙江: [127.9688, 45.368],
        内蒙古: [110.3467, 41.4899],
        吉林: [125.8154, 44.2584],
        北京: [116.4551, 40.2539],
        辽宁: [123.1238, 42.1216],
        河北: [114.4995, 38.1006],
        天津: [117.4219, 39.4189],
        山西: [112.3352, 37.9413],
        陕西: [109.1162, 34.2004],
        甘肃: [103.5901, 36.3043],
        宁夏: [106.3586, 38.1775],
        青海: [101.4038, 36.8207],
        新疆: [87.9236, 43.5883],
        四川: [103.9526, 30.7617],
        重庆: [108.384366, 30.439702],
        山东: [117.1582, 36.8701],
        河南: [113.4668, 34.6234],
        安徽: [117.29, 32.0581],
        湖北: [114.3896, 30.6628],
        浙江: [119.5313, 29.8773],
        福建: [119.4543, 25.9222],
        江西: [116.0046, 28.6633],
        湖南: [113.0823, 28.2568],
        贵州: [106.6992, 26.7682],
        云南: [102.9199, 25.4663],
        广东: [113.12244, 23.009505],
        广西: [108.479, 23.1152],
        海南: [110.3893, 19.8516],
        上海: [121.4648, 31.2891],
        西藏: [91.141017, 29.668461]
      };
      var data = [{
            name: '山西省',
            value: 123
          },{
            name: '北京市',
            value: 500
          },{
            name: '辽宁省',
            value: 124
          },{
            name: '河北省',
            value: 3211
          },{
            name: '山东省',
            value: 998231
          },{
            name: '广西省',
            value: 3122222222
          },{
            name: '云南省',
            value: 312
          },{
            name: '浙江省',
            value: 321
          },{
            name: '上海市',
            value: 312
          },{
            name: '江苏省',
            value: 3112
          },{
            name: '湖北省',
            value: 3121
          },{
            name: '湖南省',
            value: 321321
          },{
            name: '西藏',
            valie: 321321
          },{
            name: '内蒙古',
            value: 321
          },{
            name: '黑龙江省',
            value: 321
          },{
            name: '吉林省',
            value: 44412
          },{
            name: '天津市',
            value: 312
          },{
            name: '广州省',
            value: 321
          },{
            name: '江西省',
            value: 312
          },{
            name: '广东省',
            value: 312
          },{
            name: '福建省',
            value: 312
          },{
            name: '河南省',
            value: 312
          },{
            name: '四川省',
            value: 312
          }
          ,{
            name: '安徽省',
            value: 312
          }];
      var mapData = [];
      for (var key in geoCoordMap) {
        if (name.includes(key)) {
          geoGpsMap = geoCoordMap[key];
        }
        const keys = key;
        const filters = data.filter(item => {
          return item.name.includes(keys);
        })[0];

        mapData.push({
          name: key,
          value: filters ? filters.value : 0
        });
      }
      mapData.sort((a, b) => {
        return a.value - b.value;
      });
      const colors = ['rgb(209,211,187)', 'rgb(180,198,155)', 'rgb(83,156,158)', 'rgb(58,127,174)', 'rgb(38,88,146)', 'rgb(31,53,117)', 'rgb(26,50,114)', 'rgb(29,73,188)', 'rgb(11,28,77)', 'rgb(10,22,57)'];
      let echarts = require('echarts')
      echarts.registerMap('china',require('../dashboard/china.json'))
      var convertData = function (data) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var geoCoord = geoCoordMap[data[i].name];
        if (geoCoord) {
          res.push({
            name: data[i].name,
            value: geoCoord.concat(data[i].value)
          });
        }
      }
      return res;
    };
    var convertToLineData = function (data, gps) {
      var res = [];
      for (var i = 0; i < data.length; i++) {
        var dataItem = data[i];
        var toCoord = geoCoordMap[dataItem.name];
        var fromCoord = gps;// gps：‘中心点’
        if (fromCoord && toCoord) {
          res.push({
            fromName: gps,
            toName: dataItem.name,
            coords: [
              fromCoord,
              toCoord
            ]
          });
        }
      }
      return res;
    };

    var option = {
      backgroundColor: 'rgba(0,0,0,0)',
      series: [
        // 地图线的动画效果
        {
          name: '',
          type: 'lines',
          zlevel: 2,
          effect: {
            show: true,
            period: 6,
            // symbol: planePath,
            trailLength: 0,
            symbolSize: 4
          },
          lineStyle: {
            normal: {
              type: 'dotted',
              color: '#ABE2FF',
              width: 2,
              opacity: 1,
              curveness: 0.3
            }
          },
          tooltip: {
            show: false
          },
          data: convertToLineData(mapData, geoGpsMap)
        },
        // 地图点的动画效果
        {
          name: '供需占比',
          type: 'effectScatter',
          coordinateSystem: 'geo',
          data: convertData(mapData).map(item => {
            return {
              name: item.name,
              value: item.value.splice(0, 2)
            };
          }),
          symbolSize: 3,
          showEffectOn: 'render',
          rippleEffect: {
            scale: 5,
            brushType: 'stroke'
          },
          hoverAnimation: true,
          itemStyle: {
            normal: {
              color: '#fff',
              shadowBlur: 20,
              shadowColor: '#333'
            }
          }
        },
        // 地图？
        {
          type: 'map',
          mapType: 'china',
          top: '2%',
          // left: '30%',
          label: { // 地图上的文字
            normal: {
              show: true,
              textStyle: {
                color: '#1DE9B6'
              }
            }
          },
          itemStyle: {
            emphasis: { // 高亮时区域颜色
              areaColor: 'rgb(180,198,155)'
            }
          },
          data: convertData(mapData).map((item, index) => {
            const length = mapData.length;
            const percent = Math.floor(length / colors.length);

            let active = Math.floor(index / percent);

            if (active === colors.length) {
              active = colors.length - 1;
            }
            return {
              name: item.name,
              value: item.value[2],
              itemStyle: {
                areaColor: item.value[2] ? colors[active] : colors[0]
              }
            };
          })
          // geoIndex: 0,
          // zlevel: 1,
        }
      ],
      geo: {
        map: 'china',
        top: '2%',
        aspectScale: 0.75, // 长宽比
        // left: '30%',
        // zoom: 1.1,
        roam: false,
        itemStyle: {
          normal: {
            shadowColor: 'rgb(58,115,192)',
            shadowOffsetX: 4,
            shadowOffsetY: 6
          }
        },
        regions: [{
          name: '南海诸岛',
          itemStyle: {
            normal: {
              opacity: 0,
              label: {
                show: false
              }
            }
          }
        }]
      },
      tooltip: {
        trigger: 'item',
        backgroundColor: 'rgba(0,0,0,0)',
        padding: 0,
        formatter: function (params) {
          var name = params.name || params.seriesName;
          var value = params.data.value || 0;
          // 实际来源地**
          // 最终目的地规模**人
          var content = `<div class="info_box">
            <div class="info_box_marker"></div>
            <div class="info_box_box">
              <span class="name">${name}</span>
              <span class="value">${value}</span>
              <span class="company">人</span>
            </div>
          </div>`;
          return content;
        }
      }
    };
    let echart = echarts.init(document.getElementById('echartsT'))
    echart.setOption(option)
    },
    createMyecharts(){
      let echarts = require('echarts')
      echarts.registerMap('world',require('../dashboard/word.json'))
      var allData = {
        citys: [
            { name: '美国', value: [-118.24311, 34.052713,100], },
            { name: '澳大利亚', value: [149.08, -35.15, 2],},
            { name: '以色列', value: [35.12, 31.47, 4],},
            { name: '巴西', value: [-48.678945, -10.493623, 4], },
            { name: '泰国', value: [100.35, 13.45, 4], },
            { name: '沙特阿拉伯', value: [46.42, 24.41, 4] },
            { name: '新加坡', value: [103.51, 1.18, 4]},
            { name: '新西兰', value: [174.46, -41.19, 4], },
            { name: '阿根廷', value: [-60.0, -36.3, 4],},
            { name: '埃塞俄比亚', value: [38.42, 9.02, 4], },
            { name: '哥伦比亚', value: [-74.0, 4.34, 4],  },
            { name: '英国', value: [-2.58, 54.45, 14],  },
            { name: '俄罗斯', value: [80.35, 60.45, 73],  },
            { name: '法国', value: [2.87, 46.82, 10],  },
        ],
        moveLines: [
            {
                fromName: '柳州',
                toName: '美国',
                coords: [
                    [109.415953,24.325502],
                  [-118.24311, 34.052713],
                ],
            },
            {
                fromName: '柳州',
                toName: '英国',
                coords: [
                    [109.415953,24.325502],
                  [-2.58, 54.45],
                ],
            },
            {
                fromName: '柳州',
                toName: '俄罗斯',
                coords: [
                    [109.415953,24.325502],
                  [80.35, 60.45],
                ],
            },
            {
                fromName: '柳州',
                toName: '法国',
                coords: [
                    [109.415953,24.325502],
                  [2.87, 46.82],
                ],
            },
            {
                fromName: '柳州',
                toName: '澳大利亚',
                coords: [
                    [109.415953,24.325502],
                  [149.08, -35.15],
                ],
            },
            {
                fromName: '柳州',
                toName: '以色列',
                coords: [
                    [109.415953,24.325502],
                    [35.12, 31.47],
                ],
            },
            {
                fromName: '柳州',
                toName: '巴西',
                coords: [
                    [109.415953,24.325502],
                    [-48.678945, -10.493623],
                ],
            },
            {
                fromName: '柳州',
                toName: '泰国',
                coords: [
                    [109.415953,24.325502],
                    [100.35, 13.45],
                ],
            },
            {
                fromName: '柳州',
                toName: '沙特阿拉伯',
                coords: [
                    [109.415953,24.325502],
                    [46.42, 24.41],
                ],
            },
            {
                fromName: '柳州',
                toName: '新加坡',
                coords: [
                    [109.415953,24.325502],
                    [103.51, 1.18],
                ],
            },
            {
                fromName: '柳州',
                toName: '新西兰',
                coords: [
                    [109.415953,24.325502],
                    [174.46, -41.19],
                ],
            },
            {
                fromName: '柳州',
                toName: '阿根廷',
                coords: [
                    [109.415953,24.325502],
                    [-60.0, -36.3],
                ],
            },
            {
                fromName: '柳州',
                toName: '埃塞俄比亚',
                coords: [
                    [109.415953,24.325502],
                    [38.42, 9.02],
                ],
            },
            {
                fromName: '柳州',
                toName: '哥伦比亚',
                coords: [
                    [109.415953,24.325502],
                    [-74.0, 4.34],
                ],
            },
    ]
        
    }
    var cityData=[ { name: '柳州', value: [109.415953,24.325502], },]
        var option = {
            backgroundColor:'rgb(2,30,52)',
            tooltip: {
                trigger: "item",
                formatter: function (params, ticket, callback) {
                    if (params.seriesType == "effectScatter") {
                        return params.marker + params.data.name + "" + params.data.value[2];
                    } else if (params.seriesType == "lines") {
                        return params.data.fromName + " -> " + params.data.toName + "<br />" + params.data.value;
                    } else {
                        return params.name;
                    }
                },
            },
            grid: {
                right: '8%',
                // top:'5%'
            },
            geo: {
                map: 'world',
                aspectScale: 0.65, //长宽比
                zoom: 1.12,
              tooltip: {
                show: !1,
              },
              scaleLimit: {
                min: 1,
                max: 5,
              },
              label: {
                show: !1,
              },
              roam: false,
              itemStyle: {
                normal: {
                  shadowColor: "#164A7C",
                  shadowOffsetX: 5,
                  shadowOffsetY: 5,
                },
              },
            },
            tooltip: {
                trigger: "item",
            },
            zlevel: 999,
            series: [ {
                type: "map",
                roam: false,
                label: {
                  show: !1,
                },
                tooltip: {
                  show: !1,
                },
                itemStyle: {
                  normal: {
                    borderColor: "#3EC3E3",
                    borderWidth: 0.2,
                    areaColor: {
                      type: "radial",
                      x: 0.5,
                      y: 0.5,
                      r: 0.8,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#1867B5", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#1867B5", // 100% 处的颜色
                        },
                      ],
                      globalCoord: true, // 缺省为 false
                    },
                  },
                  emphasis: {
                    label: {
                      // show: !1,
                      color: "#fff",
                    },
                    areaColor: "#0E83B7",
                    //    shadowColor: 'rgb(12,25,50)',
                    borderWidth: 0.2,
                  },
                },
                aspectScale: 0.65, //长宽比
                zoom: 1.12,
                //     roam: false,
                map: "world", //使用
                // data: this.difficultData //热力图数据   不同区域 不同的底色
              },
            {
                name: '地点',
                type: 'scatter',
                coordinateSystem: 'geo',
                zlevel: 999,
                    rippleEffect: {
                        period: 1,
                        brushType: "stroke",
                        scale: 8
                    },
                    label: {
                        normal: {
                            show: true,
                            position: "right",
                            color: "#9966cc",
                            formatter: "{b}",
                            textStyle: {
                                color: "#fff"
                            }
                        },
                        emphasis: {
                            show: true
                        }
                    },
                    symbol: "pin",
                symbolSize: 20,
                itemStyle: {
                  normal: {
                    show: true,
                    color: {
                      type: "linear",
                      x: 0,
                      y: 0,
                      x2: 0,
                      y2: 1,
                      colorStops: [
                        {
                          offset: 0,
                          color: "#F65857", // 0% 处的颜色
                        },
                        {
                          offset: 1,
                          color: "#EC2624", // 100% 处的颜色
                        },
                      ],
                    },
                  },
                },
                data: cityData,
            },{
                type: "effectScatter",
                coordinateSystem: "geo",
                zlevel: 999,
                rippleEffect: {
                  //涟漪特效
                  period: 15, //动画时间，值越小速度越快
                  brushType: "stroke", //波纹绘制方式 stroke, fill
                  scale: 2, //波纹圆环最大限制，值越大波纹越大
                },
                label: {
                  normal: {
                    show: false,
                    position: "right", //显示位置
                    offset: [5, 0], //偏移设置
                    formatter: "{b}", //圆环显示文字
                    textStyle: {
                      color: "rgb(214,206,143)",
                    },
                  },
                },
                emphasis: {
                  show: true,
                  scale: !0,
                  label: {
                    show: true,
                    backgroundColor: "#000",
                    padding: 2,
                    borderRadius: 2,
                    color: "#fff",
                  },
                },
                symbol: "circle",
                symbolSize: "6",

                itemStyle: {
                  normal: {
                    show: false,
                    color: "#0FD1D9",
                  },
                },
                data: allData.citys,
            },
            {
                name: '线路',
                type: 'lines',
                coordinateSystem: 'geo',
                zlevel: 999,
                large: true,
                zlevel: 999,
                effect: {
                    show: true,
                    period: 10, //箭头指向速度，值越小速度越快
                    trailLength: 0.1, //特效尾迹长度[0,1]值越大，尾迹越长重
                    symbol: 'arrow', //箭头图标
                    symbolSize: 7, //图标大小
                },
                lineStyle: {
                    normal: {
                    color: "#0FD1D9",
                    // 线条宽度
                    width: 0.2,
                    opacity: 1,
                    curveness: 0.3,
                    }
                },
                label: {
                    normal: {
                        show: false,
                        position: 'middle',
                        formatter: '{b}'
                    }
                },
                data: allData.moveLines,
            },
        ],
      }
      let echart = echarts.init(document.getElementById('echarts'))
      echart.setOption(option)
    }
  }
}
</script>

<style lang="scss" scoped>
.app-main{
  padding: none !important;;
}
.dashboard-container{
  width: 100vw;
  height: 100vh;
  .echarts{
    width: 100%;
    height: 100vh;
  }
  .echartsT{
    width: 100vw;
    height: 100vh;
  }
  
}
</style>
